<template>
  <div class="bg-gray-100">
    <div class="bg-white py-10 mb-4">
      <Container>
        <!-- 内容区域 -->
        <div class="flex w-full">
          <!-- 课程介绍 -->
          <div class="bg w-1/2"></div>
          <!-- 左图/右文档 -->
          <div class="w-1/2">
            <div class="text-3xl">课程名称</div>
            <div class="text-gray-300 mb-4 line-clamp-3">课程描述</div>
            <div class="flex text-sm mb-4 text-gray-300">
              <span class="pr-2">赵天才</span>
              <span class="pl-2">前端大牛</span>
            </div>
            <div class="text-orange-400 font-bold mb-4 text-2xl">￥3999.00</div>
            <div class="flex">
              <div class="btn mr-4">加入购物车</div>
              <div class="btn-plain">收藏</div>
            </div>
          </div>
        </div>
      </Container>
    </div>

    <Container>
      <!-- 课程详情 -->
      <div class="w-full flex">
        <div class="w-3/4 bg-white mr-4">
          <!-- tabs -->
          <div class="border-b-1 border-b-color-gray-200">
            <Tabs :items="['课程介绍', '章节目录', '学院评价']" v-model="activeIndex"></Tabs>
          </div>
          <div class="p-4">
            <!-- tabs content -->
            <!-- 左边是 Markdown的详情 -->
            <router-view></router-view>
            <!-- 课程目录 -->
            <!-- 评价 -->
          </div>
        </div>
        <!-- 右边是侧边栏 -->
        <div class="w-1/4">
          <div class="bg-white mb-4 h-20">边栏</div>
          <div class="bg-white mb-4 h-20">边栏</div>
        </div>
      </div>
    </Container>
  </div>
</template>

<script setup lang="ts">
const activeIndex = ref(0)
provide('activeIndex', activeIndex)
</script>

<style scoped lang="scss">
.tabs {
  .active {
    --at-apply: text-sky-400 relative;
    &::after {
      content: '';
      --at-apply: absolute bg-sky-400 w-8 h-[2px] bottom-0 left-[calc(50%-1rem)];
    }
  }
}
</style>
